<template>
    <div class="work-detail" v-loading="loading" element-loading-text="Loading..." element-loading-background="rgb(255,255,255,0.95)">
        <div class="top-info">
            <div class="img">
                <!-- <img v-lazy="data.workCouerPath" alt=""> -->
                <video :src="data.workPath" controls></video>
            </div>
            <div class="info">
                <div class="info-top">
                    <img v-lazy="data.profilePath" alt="" class="avatar">
                    <div class="name">{{ data.nickName }}</div>
                </div>
                <div class="des">
                    <p>{{ data.synopsis }}</p>
                </div>
            </div>
        </div>
        <div class="main-box">
            <div class="tab">
                <div class="work-info">
                    <h2>{{ data.workName }}</h2>
                    <div class="work-info-right">
                        <p class="type">作品类型：{{ type }}&nbsp;&nbsp;&nbsp;&nbsp;{{ data.updateTime }}</p>
                        
                    </div>
                </div>
                <div class="tab-a">
                    <RouterLink v-for="(item, index) in routerData" :key="index" :to="item.path"
                        :class="{ 'active': thisPath === item.path }" @click="thisPath = item.path">
                        {{ item.title }}
                    </RouterLink>
                </div>
            </div>
            <div class="container">
                <router-view v-slot="{ Component }">
                    <transition :name="$router.transitionName">
                        <keep-alive>
                            <component :is="Component" :key="$route.name" />
                        </keep-alive>
                    </transition>
                </router-view>
            </div>
        </div>
    </div>
</template>
<script setup>
import router from '@/router';
import { useRoute } from 'vue-router';
import { onMounted, ref, computed } from 'vue'
import { GetWorkDetail } from '@/api/front/contest';
const loading = ref(true)
const route = useRoute();
const data = ref({
    contestId: '',
    workName: '',
    nickName: '',
    updateTime: '',
    profilePath: '',
    synopsis: '',
    workCouerPath: '',
    likeNum: 0,
})
const thisPath = ref(router.currentRoute.value.path)
const workId = route.params.id 

const routerData = ref([
    {
        title: '作品介绍',
        path: `/work-detail/${workId}/work-introduce`
    },
    {
        title: '评委评语',
        path: `/work-detail/${workId}/work-show`
    },
    {
        title: '评论区',
        path: `/work-detail/${workId}/work-comment`
    }
])

const type = computed(() => {
  switch (data.value.workType) {
    case 0:
      return "理工";
    case 1:
      return "外语";
    case 2:
      return "文体";
    case 3:
      return "商科";
    case 4:
      return "综合";
    default:
      return "未知";
  }
})

const getWorkDetail = async () => {
    const res = await GetWorkDetail({
        workId: workId
    })
    data.value = res.data[0]
    sessionStorage.setItem('workDetail',JSON.stringify(data.value))
    console.log('workDetail:',data.value)
    loading.value = false
}

onMounted( () => {
    window.scrollTo(0, 0)
    getWorkDetail()
})






</script>
<style scoped lang="scss">
.work-detail {
    width: 100%;
    height: 100%;
    padding: 0 14%;
    @media screen and (max-width: 1024px) {
        padding: 0 5%;
    }

    .top-info {
        display: flex;
        // margin: 20px 0;
        margin-top: 20px;
        height: 400px;
        box-sizing: border-box;
        margin-bottom: 5px;

        .img {
            // width: 200px;
            // height: 200px;
            height: 400px;
            flex: 1;
            border-radius: 20px;
            overflow: hidden;

            video {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .info {
            box-shadow: var(--shadow-1);
            height: 100%;
            width: 200px;
            margin-left: 20px;
            border-radius: 20px;

            .info-top {
                margin: 10px 30px;
                display: flex;
                align-items: center;

                .avatar {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 10px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .name {
                    // margin-left: 10px;
                    font-size: 20px;
                    font-weight: bold;
                }
            }

            .des {
                width: 180px;
                margin: 10px;
                border-top: 2px solid rgb(186, 186, 186, .5);
                margin-top: 10px;

                p {
                    margin-top: 10px;
                    font-size: 16px;
                    color: rgb(0, 0, 0, .7);
                    text-indent: 2em;
                }
            }
        }
    }

    .main-box {
        height: auto;
        

        .tab {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            position: sticky;
            top: 60px;
            // 毛玻璃
            backdrop-filter: saturate(180%) blur(20px);
            background-color: rgba(255, 255, 255, 0.7);

            .work-info {
                display: flex;
                align-items: center;
                flex: 1;
                h2 {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    flex: 1;
                }
                .work-info-right {
                    padding: 0 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    p {
                        height: 100%;
                    }
                    .type {
                        margin-right: 20px;
                        color: rgb(0, 0, 0, .7);
                    }
                    .like-box {
                        display: flex;
                        align-items: center;
                        margin-left: 20px;
    
                        .likes-count {
                            margin-right: 5px;
                        }
    
                        img {
                            width: 20px;
                            height: 20px;
                        }
                    }
                }
            }

            .tab-a {

                a {
                    color: #000;
                    font-size: 16px;
                    padding: 20px 20px;
                    text-decoration: none;
                    position: relative;
    
                    &:hover {
                        color: var(--color-primary);
                    }
    
                    &::after {
                        content: '';
                        width: 0;
                        position: absolute;
                        bottom: 0;
                        height: 4px;
                        background-color: var(--color-primary);
                        transition: .3s all ease-out;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
    
                .active {
                    color: var(--color-primary);
                }
    
                .active::after {
                    width: 100%;
                }
            }


            
        }

        .container {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            box-shadow: var(--shadow-1);
            padding: 20px;
            box-sizing: border-box;
            margin: 10px 0;
        }
    }
}
</style>